<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>柱形图</title>
    <style>
      #box {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        border: 1px #ccc solid;
      }
    </style>
  </head>
  <body>
    <canvas id="box" width="600" height="600"></canvas>
  </body>
</html>
<script>
  const dom = document.querySelector("#box");
  const context = dom.getContext("2d");
  //   中心点
  context.save();
  context.translate(100, 550);
  context.save();

  //   X
  context.beginPath();
  context.moveTo(-70, 0);
  context.lineTo(450, 0);
  context.stroke();
  //   y
  context.beginPath();
  context.moveTo(-50, 20);
  context.lineTo(-50, -500);
  context.stroke();
  //   添加文字--X
  context.font = "20px sans-serif";
  context.fillText("1", 50, 20);
  context.fillText("2", 200, 20);
  context.fillText("3", 350, 20);
  context.fill();
  //   柱形图
  context.beginPath();
  context.fillStyle = "#ff0";
  context.fillRect(10, -100, 100, 100);
  context.lineWidth = 5;
  context.strokeRect(8, -102, 100, 100);
  context.fill();
  //
  context.beginPath();
  context.fillStyle = "#f00";
  context.fillRect(160, -200, 100, 200);
  context.lineWidth = 5;
  context.strokeRect(160, -202, 100, 200);
  context.stroke();
  context.fill();
  //
  context.beginPath();
  context.fillStyle = "#0f0";
  context.fillRect(310, -300, 100, 300);
  context.strokeRect(310, -302, 100, 300);
  context.restore();
  context.restore();
</script>
